<!--
 * @Description: TCPMSS
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-09-28 10:38:24
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <div class="table-top">
      <!-- 刷新 -->
      <el-button size="medium" plain @click="reset">刷新</el-button>
    </div>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <el-table-column label="ID" align="center" width="100" sortable prop="id" />
      <el-table-column label="端口" show-overflow-tooltip min-width="100" prop="intfName">
        <template slot-scope="scope">{{scope.row.intfName.toUpperCase()}}</template>
      </el-table-column>
      <el-table-column label="MSS值" align="center" width="100" prop="adjustMss" />
      <!-- 操作 -->
      <el-table-column fixed="right" align="center" label="操作" width="80px">
        <!-- 编辑 -->
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >编辑</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <el-dialog title="编辑TCPMSS" :close-on-click-modal="false" width="500px" :visible.sync="dvEdit">
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="right"
      >
        <!-- 端口 编辑 -->
        <el-form-item label="端口" prop="intfName">
          <el-input v-model="form.intfName" disabled></el-input>
        </el-form-item>
        <el-form-item label="MSS值" prop="adjustMss">
          <el-input-number v-model="form.adjustMss" placeholder="500-1460" :min="500" :max="1460"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="dvEdit = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['ne'],
  data () {
    return {
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dvEdit: false,
      form: {},
      rules: {
        adjustMss: [{
          required: true,
          message: '范围：500-1460',
          trigger: 'blur'
        }]
      }
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 编辑
    handleUpdate (data) {
      let _this = this;
      _this.dvEdit = true;
      _this.form = {
        id: data.id,
        intfName: data.intfName,
        adjustMss: data.adjustMss
      };
    },
    // 确认提交
    onSubmit () {
      let _this = this;
      let params = {
        id: _this.form.id,
        neId: _this.ne.id,
        siteId: _this.ne.extAttrs.siteId,
        intfName: _this.form.intfName,
        adjustMss: _this.form.adjustMss
      };
      _this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          _this.$http.post({
            url: '/api/sdwan/mss/update',
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success('更新成功！');
              _this.dvEdit = false;
              _this.$refs['ruleForm'].resetFields();
              _this.refresh();
            }
          });
        } else {
          _this.$message.error('检查必填项！');
        }
      });
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        neId: _this.ne.id,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/mss/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>